一款内部开源的可视化图表插件

内容创作辅助小帮手-让你可以随时随地制作数据类图表

快速预览

从直观的视觉效果上看，数途可视化图表插件，由顶部的图表切换面板，中部的图表展示区域，右侧的属性设置区域，以及浮层弹窗的数据编辑区四个部分组成。在顶部的图表类型面板，涵盖了原数途系统的所有图表类型，用户可以快速切换到想要的图表类型。中部的图表展示区域，相比较原系统，增加了缩放栏，更能适应不同大小的宿主容器。右侧的属性设置区域，做了功能上的调整，保留了大部分的设置项目，原有的保存功能以及设置项目，转移到了“设置”一栏下。数据编辑的弹窗效果，维持不变。

来源背景

可能有同学使用过数途-图表创作平台，在该平台通过几步简单的操作就可以创建出想要的图表，支持分享、保存、导出等功能。是一款小而美的工具平台，能为业务方带去更多的便利。美中不足的是数途的生态不够完善，没有相关的插件或SDK，无法将数途强大的图表展示能力，无缝集成到业务系统中，使数途的应用场景受到限制。

问题#80%#center

随着使用数途的用户群体不断扩大，越来越多的业务方提出了数途插件的诉求，希望能够将数途无缝地集成到业务系统中，通过数途强大的图表展示能力，实现数据的可视化，提升产品的内在价值。目前，数途已经以嵌入的方式集成到了智影系统，取得了不错的体验效果。只是，接入的方式不够优雅，需要双方系统做一些联动的修改，存在一定的接入成本。数途插件的推出，可以很好的解决掉该问题。通过在业务方系统中独立安装、引入，不存在耦合的问题，畅享数途强大功能的同时，而无后顾之忧。

需求分析

针对目前面临的问题，我们基于数途-图表创作平台设计了一款可视化图表插件，来扩展数途的生态，使得数途强大的图表展示能力惠及更多的业务方。需求#50%#center 在和多方沟通后，明确了业务团队的诉求。由新闻平台前端组开发数途插件，插件大致要满足以下几点需求。

服务于业务系统，满足多重业务场景
在保证数途原有的图表功能的前提下，尽量缩减插件包的体积
继承数途创作平台强大的图表绘制能力，里面的图表全部保留
插件打包后的体积尽可能的小，保持插件的轻量化
前期试点react组件版，后续支持Vue版，最后支持原生JS版
使用门槛儿低，支持NPM包安装，简易认证后无缝集成

stage#80%#center

现阶段推出的是react版本，后续会推出数途插件的其它框架版本，以及原生的JS版本，逐步扩展数途的生态，期待能够服务更多的业务系统。

设计&实现

数途可视化图表插件，依托于原有的数途项目，在此基础上主要做了以下几点改造。

部分功能的取舍，将不需要的功能逻辑移除
代码工程的改造，来降低导出包的体积
增加插件的特有功能，提供公共API
视图交互效果的调整，来适应不同的宿主业务系统

数途插件整体的逻辑功能如上图所示，最上层是对外开放的接口层，中间是插件的交互逻辑处理层，最下面是数途原有的核心展示层。接口层，提供和业务系统衔接的API接口，包括导出图片、设定图表的展示区域大小、默认参数配置以及简易认证功能。中间逻辑处理层，包含了组成插件自身的视图组件、数据状态以及交互逻辑，本次数途插件的功能改造也主要发生这里。核心展示层，是在原有的数途项目的核心图表模块的基础上经过微调引入的，这里包含了几十种图表的模板参数、对底层Echarts的封装逻辑、提供了图表的绘制能力。

从工程落地的视角看，数途插件所依赖的三方库及功能如上图所示。目前插件，基于react框架（后续会支持其它框架及原生js版）开发。基于echarts库渲染各种图表，提供了对其的优雅封装。项目工程基于webpack构建。基于handsontable提供了在web页面的实时数据编辑能力，配合redux的状态管理，用户在视图上的修改都能及时反映到图表的变化上。插件的视图部分，基于antd开发了各种交互组件，同时基于xls库提供了本地导入excel数据的能力，此外还引入了诸如lodash之类的工具库等。

数途插件包含了很多组件类，无法一一列举阐述。从大的方面抽象，如上图所示，可以归纳出三个组件（类）包。ShutuReact是对外暴露的接口层类；WorkSpace负责插件自身的展示和交互处于中间层，同时提供了上下游之间的沟通；ShutuChart对标核心功能层，包含了大量的各种底层图表组件，提供了原数途内置的图表展示能力。

插件的逻辑调用关系，如上图所示。其中Plugin表示前面提到的ShutuReact（因为以后可能会有ShutuView、ShutuJS，这里用Plugin统一表示）是对外的接口实现类。Plugin中提供的api,会调用到WorkSpace，涉及到图表的绘制展示则经由WorkSpace中间处理后，调用底层核心的ShutuChart。比如，一开始业务方嵌入插件后，初始化Plugin，Plugin在获得业务系统传递的参数，首先进行参数校验以及身份校验，通过后转入WorkSpace组织图表所需的数据和相关的属性配置等，之后交给ShutuChart完成图表在页面的渲染展示。插件提供的导出图片、个性化设置等功能，也同样按照上面的逻辑流程执行，不再赘述。

打包#80%#center 数途插件打包后的体积大约1.5M，基本实现了轻量化的目标，不会给业务系统带来太大的负担。

接入使用

数途插件的，接入十分方便，基本没有使用的门槛。

安装数途插件，推荐npm安装
在项目中引入插件库
设定初始化参数（包括appid | appsecret）
调用插件的开放能力

通过 NPM安装依赖

shell

tnpm install @tencent/shutu-react

tnpm install @tencent/shutu-react

在接入前，需要先申请appID 和 appSecret，如果您有这方面的需求，想要体验一下数途插件，可以联系 thinkchen（或者 uliang）获得产品授权密钥。

javascript

import React, { useCallback } from 'react';
import ShuTuReact from '@tencent/shutu-react';

function App() {
  const shutuRef = createRef();
  const handleChartImage = (imgBlob) => {
    // process image data
    // eslint-disable-next-line no-console
    console.log(' exported chart image : ', imgBlob);
  };
  // eslint-disable-next-line no-console
  ReactDOM.render(
    <ShuTuReact
      onExportedChart={handleChartImage}
      ref={shutuRef}
      appID="*****************************"
      appSecret="*****************************"
    />,
    document.getElementById('root'),
  );
}

import React, { useCallback } from 'react';
import ShuTuReact from '@tencent/shutu-react';

function App() {
  const shutuRef = createRef();
  const handleChartImage = (imgBlob) => {
    // process image data
    // eslint-disable-next-line no-console
    console.log(' exported chart image : ', imgBlob);
  };
  // eslint-disable-next-line no-console
  ReactDOM.render(
    <ShuTuReact
      onExportedChart={handleChartImage}
      ref={shutuRef}
      appID="*****************************"
      appSecret="*****************************"
    />,
    document.getElementById('root'),
  );
}

使用引入示例，见上面的代码，其中 maxHeight 表示图表可视区域的高度。

效果展示

效果1 上面的下拉面板，可以快速实现图表的切换，十分方便用户快速的选择不同类型的图表。

效果2 选择某个类型的图表后，面板自动收起。右侧的属性编辑区，包含的各项设置十分完备，基本能满足用户的需求。

在新闻号的接入效果，若上图所示，可以直接将图表导出图片，嵌入到编辑器中。

系列文章

下面是有关数途系统的介绍文章，方便不太了解数途背景的各位老师，熟悉我们的产品。

************************************************ ************************************************

一款内部开源的可视化图表插件 ​

快速预览 ​

来源背景 ​

需求分析 ​

设计&实现 ​

接入使用 ​

效果展示 ​

系列文章 ​